<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
  <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
  <style>
  body .contain{
	height:100%;
	width:1024px;
	font-size: 12px;
	font-family: Arial;
  }
  .imgAndInfo{
	margin: 10px;
  }
  div.imgInimgAndInfo{
    margin: 10px auto;
	height: 120px;
	border: 1px solid #F5F5F5;;
  }
  div.parkName {
	margin:0px 0px 5px;
	background-color: #F5F5F5;
	border:1px solid #F5F5F5;
	text-align: center;
	padding: 10px;
  }
  div.carLocation {
	background-color: #F5F5F5;
  }
  div.parkStatus{
	background-color: #F5F5F5;
	padding: 10px;
  }
  .carDistance{
	
  }
  .carName{
	color: black;
	font-size:20px;
	font-weight:bold;
  }
   .carInformation{
	 background-color: #F5F5F5;
	 margin:5px 0px;
   }
   .carTitle{
	 font-size: 18px;
	 font-weight: bold;
	 padding: 15px;
	 border: 1px solid white;
   }
   .productPriceDiv{
	 width:50%;
   }
   .parkEvaluate{
	 background-color: #F5F5F5;
   }
   .sixTr{
		border:1px solid #F5F5F5;
		height:100px;
		text-align:center;
		position: relative;
   }
   .six{
        text-align: center;
		font-size: 25px;
		color:red;
		margin:5px;
   }
   .parkInf{
		bolder: 1px solid white;
		text-align:center;
		padding:20px;
   }
   .speciction{
		padding:5px;
		font-size: 8px;
   }
   .parkSize{
		border: 1px solid white;
		background-color:#F5F5F5;
		width: 100%;
   }
   .bottom{
      text-align:center;
	  background-color:#FFEDED;
	  font-size: 16px;
   }
   .navgation{
		background-color:#FFEDED;
		text-align:center;
		font-size:16px;
		font-family:arial;
		border:1px solid white;
   }
   button{
		background-color:#FFEDED;
		border:1px solid transparent;
		color: blue;
		font-size: 20px;
		font-weight:bold;
		padding: 5px 0px;
   }
   .book{
		border:1px solid white;
   }
</style>
</head>
<body>
<div class="imgAndInfo">
    <div class="imgInimgAndInfo">
        <img width="100px" src="http://how2j.cn/tmall/img/productSingle/8619.jpg">
    </div>
    <div class="infoInimgAndInfo">
        <div class="parkName">
            停车场名称
			<div>对外开放</div>
        </div >
        <div class="parkStatus">
                 <span>位置</span>
				 <span class="pull-right">距离</span>
        </div>
        <div class="carInformation">
            <div class="carTitle">
			  车位信息
            </div>
			<div class="row parkInf">
				<div class="col-xs-6"><span class="sixTr"><span class="six">6元</span>/元首小时</span>
				<div class="speciction">起始价5元，每多停一小时加收2元</div>
				</div>
				<div class="col-xs-6"><span class="sixTr"><span class="six">6个</span>空车位</span></div>
			</div>
		 
				<div class="col-md-6 column parkSize">
				 停车场类型：
				</div>
        </div>
        <div class="productSaleAndReviewNumber">
     <nav class="navbar navbar-default navbar-fixed-bottom bottom">
<div class="bottom">
     <span class="col-xs-6 navgation"><button class="navButton">导航</button></span>
	 <span class="col-xs-6 book"><button>预定</button></span>
</div>
</nav>
        </div>    
    </div>
    <div style="clear:both"></div>
</div>
</body>
</html>